<template>
	<view class="">
		<u-sticky>
			<view class="search-pop">
				<view class="top-input row between">
					<u-icon name="search"></u-icon>
					<input
						type="text"
						value=""
						confirm-type="search"
						placeholder-style="color:#74738e;font-size:26upx;"
						placeholder="请输入关键词"
						v-model="keywords"
						@confirm="submitSearch"
					/>
					<view class="btn" @tap="submitSearch">搜索</view>
				</view>
			</view>
		</u-sticky>

		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true" :headerHeight="60">
			<u-row gutter="30" style="flex-wrap: wrap;">
				<u-col span="6" v-for="(item, index) in dataList" :key="index"><pages-item :item="item"></pages-item></u-col>
			</u-row>
		</s-pull-scroll>
	</view>
</template>

<script>
import pagesItem from "@/components/page-item-list/page-goos-item.vue";
export default {
	components: {
		pagesItem
	},
	data() {
		return {
			keywords: "",
			dataList: []
		};
	},
	onLoad(options) {
		this.setNavTitle(options.name);
		this.keywords=options.name;
		this.refresh();
	},
	methods: {
		refresh() {
			this.$nextTick(() => {
				this.$refs.pullScroll.refresh();
			});
		},
		submitSearch() {
			if (this.keywords == "") {
				this.$util.msg("请输入要搜索的内容!");
				return;
			}
			this.setNavTitle(this.keywords);
			this.refresh();
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async loadData(pullScroll) {
			const data={
				uid:uni.getStorageSync('uid'),
				key:this.keywords,
				type:"0",
				pageNo:pullScroll.page,
				pageSize:"10"
			};
			const res=await this.$request('goods/goods-list',data,{showLoading:true});
			if(this.pageNo==0){
				this.dataList=[];
			}
			if(res.result!=0 || res.data.list.length==0){
				pullScroll.empty();
				return
			}
			this.dataList=this.dataList.concat(res.data.list);
			pullScroll.page>=Math.ceil(res.data.count/10)?pullScroll.finish():pullScroll.success();
		}
	}
};
</script>
<style scoped lang="scss">
.btn {
	width: 141upx;
	height: 64upx;
	text-align: center;
	line-height: 64upx;
	background: #ffd6d6;
	border-radius: 32upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #cc1313;
}
.del-img {
	width: 30upx;
	height: 30upx;
}

.red {
	color: #ff0000;
}

.search-img {
	width: 38upx;
	height: 38upx;
}

.uni-icon-search {
	font-size: 30upx;
}

.help-tips {
	font-size: 26upx;
	color: #999;
	line-height: 26upx;
	padding: 0 0 0 30upx;
	margin: 0;
	width: 80%;
	text-align: left;
}

.help-tips.color999 {
	color: #999999;
}
.search-pop {
	padding: 20upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-input {
	flex: 1;
	height: 70upx;
	line-height: 70upx;
	background-color: #f6f6f6;
	border-radius: 35upx;
	color: #74718c;
	padding-left: 35upx;
}

.top-input input {
	height: 100%;
	width: 100%;
	padding-left: 16upx;
}
.search-btn {
	height: 100%;
	color: #333333;
	font-size: 27upx;
}

.search-cat {
	padding: 20upx;
	background: #ffffff;
}
.search-cat .search-cat-tit {
	position: relative;
	display: flex;
	align-items: center;
	font-weight: bold;
	justify-content: space-between;
}
.search-cat .search-cat-tit .up-menu {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	line-height: 55upx;
}
</style>
